<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row items-start">
      <div
        style="display: flex; flex-direction: column; gap: 10px; width: 100%"
      >
        <div>
          <t-date-time
            dateType="datetimerange"
            label="日期时间"
            labelPosition="left"
            placeholder="placeholder"
            v-model="date1"
            displayFormatWithDateTime="YYYY/MM/DD HH:mm"
            ref="dateTime"
          />
        </div>
        <div>
          <t-date-time
            labelPosition="left"
            label="日期"
            dateType="daterange"
            v-model="date2"
            displayFormatWithDate="YYYY/MM/DD"
          />
        </div>
        <!-- <div>
          <t-date-time
            label="时间"
            dateType="timerange"
            v-model="date3"
            labelPosition="left"
          />
        </div> -->
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';

let dateTime = ref();
let date1 = ref(['2024-04-01 17:30:00','2024-04-02 17:30:00']);
let date2 = ref(['2024-04-01','2024-04-02']);
let date3 = ref('17:30:00');

</script>
